<script setup lang="ts">
import { ref } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'

const keyWord = ref('')

const handleCore = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<template>
  <view class="search">
    <view class="search__box">
      <u-search v-model="keyWord" shape="square" :show-action="false" height="52" margin="0 15rpx 0 0" action-text="" bg-color="#f6f7f9" />

      <text class="search__box--text" @click="handleCore">取消</text>
    </view>
    <view class="search__history">
      <view class="search__history-title">
        <view>搜索历史</view>
        <q-icon name="icon-shanchu" color="#696969"></q-icon>
      </view>
      <view class="search__history-main">
        <text v-for="i in 20" :key="i" class="search__history-main--item">玩具</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
page {
  background: #fff;
}
@include b(search) {
  height: 52rpx;
  margin-top: 46rpx;
  @include e(box) {
    padding: 0 28rpx;
    @include flex(space-between);
    @include m(text) {
      font-size: 24rpx;
      color: #696969;
    }
  }
  @include e(history) {
    margin-top: 62rpx;
  }
  @include e(history-title) {
    padding: 0 28rpx;
    @include flex(space-between);
    font-size: 30rpx;
    font-weight: bold;
    text-align: LEFT;
    color: #000000;
  }
  @include e(history-main) {
    padding: 0 15rpx;
    @include flex(flex-start);
    flex-wrap: wrap;
    @include m(item) {
      display: block;
      height: 52rpx;
      padding: 0 30rpx;
      line-height: 52rpx;
      background: #f2f2f2;
      border-radius: 12rpx;
      font-size: 24rpx;
      text-align: CENTER;
      color: #696969;
      margin: 20rpx 5rpx;
    }
  }
}
</style>
